<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        #list li{
            width: 400px;
            height: 40px;
            line-height: 40px;
            border-bottom: 1px solid #999;
        }
    </style>
</head>
<body>
    <h1></h1>
    <hr>
   <ul id="list">
        <li>小静静, 你宣我吗?  宣1</li>
        <li>小静静, 你宣我吗?  宣2</li>
        <li>小静静, 你宣我吗?  宣3</li>
        <li>小静静, 你宣我吗?  宣4</li>
        <li>小静静, 你宣我吗?  宣5</li>
    </ul>

    <hr>

    <div id="btnlist">
        <button>获取第 1 句话</button>
        <button>获取第 2 句话</button>
        <button>获取第 3 句话</button>
        <button>获取第 4 句话</button>
        <button>获取第 5 句话</button>
    </div>    
    <script>
        // 接收对象
        var list = document.getElementById('list').getElementsByTagName('li');
        var btnlist = document.getElementById('btnlist').getElementsByTagName('button');
        console.log(list,btnlist);
        // 利用闭包的特性 在每一次循环中 可以把每一次循环的结果 存于内存中 虽然 是不同步 但是 在内存当中可以随时被调用 但点击i为几时 就调用 i对应的结果;
        for( var i = 0;i<btnlist.length;i++){
                     console.log('a'+i);            
                                    // -------------------函数1
            (function(i){
                     console.log('b'+i);               // -------------------函数2
                // 必须传入参数i 这样才能让内部的函数读取到for当中的i
                btnlist[i].onclick = function(){
                     console.log('c' + i);              
                                    // -------------------函数3
                    alert(list[i].innerHTML);
           
                }
            })(i);

        }   






    </script>

</body>
</html>